<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="handleSelect"
      active-text-color="red"
      text-color="black"
    >
      <el-menu-item index="1">博客</el-menu-item>
      <el-menu-item index="2">官方文档</el-menu-item>
      <el-menu-item index="3">工具</el-menu-item>
      <el-menu-item index="4">开源项目</el-menu-item>
    </el-menu>
    <ul>
      <li v-for="(i, j) in dataList" class="urls">
        <a target="_blank" :href="i.url">{{ i.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      activeIndex: "1",
      dataList: { name: "", url: "" },
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      this.getCollectList(key);
    },
    async getCollectList(typeId) {
      let res = await request({
        url: `collect/list?typeId=${typeId}`,
        headers: {
          isToken: true,
        },
        method: "get",
      });
      if (res.code === 200) {
        // console.log(res.data);
        this.dataList = res.data;
      } else {
        alert(res.msg);
      }
    },
  },
  mounted: function () {
    this.getCollectList(1);
  },
};
</script>

<style scoped>
/* 超链接去下划线*/
/* a {
  text-decoration: none;
} */
.urls {
  padding: 3px;
  margin-top: 2px;
}

li.el-menu-item:hover {
  background-color: #42b983;
}

body {
  margin: 0px;
  padding: 0px;
}

#title {
  text-align: left;
  padding: 10px;
  margin: 10px;
  font-size: 20px;
  /*height: 30px;*/
}

.name {
  text-shadow: 3px 3px yellow; /* 阴影效果 */
  /* font参数：font-style  font-weight  font-size（必填）/line-height  font-family（必填）*/
  font-style: italic;
  font-size: 25px;
}

.button {
  border: 1px solid yellow;
  border-radius: 15px 15px 15px 15px;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #42b983;
  /*!* 固定位置 *!*/
  /*position: fixed;*/
  /*z-index: 99;*/
}

.num1 {
  position: absolute;
  right: 40px;
}

.num2 {
  position: absolute;
  right: 110px;
}

a:hover {
  color: orange;
}

li:hover {
  color: orange;
}

.all {
  /*background: radial-gradient(circle at 90% 30%, #fd7248, #85de3e);!* 渐变色 *!*/
  /*background-image: url("../../src/assets/img.png");*/
  /*opacity: 0.8; !* 透明度 *!*/
  color: #333;
  text-align: center;
  height: 700px;
  position: relative;
}
</style>
